<template>
  <div class="container">
    <div>
      <p>
        <label class="margin-right-mini">用户名：</label>
        <span>{{ user_info.loginName }}</span>
      </p>
      <p>
        <label class="margin-right-mini">密码：</label>
        <span class="margin-right">******</span>
        <el-button type="text" @click="dialog=true">修改密码</el-button>
      </p>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="重置密码"
      :visible.sync="dialog"
      width="600px"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="form.oldPassword" auto-complete="off" show-password class="el-input-width"/>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="form.newPassword" auto-complete="off" show-password class="el-input-width"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { operator_pwdreset } from '@/api/system';
export default {
  data() {
    const passwordRule = (rule, value, callback) => {
      const pattern = /^[^\u4e00-\u9fa5]{6,}$/;
      if (!pattern.test(value)) {
        callback(new Error('至少输入6位以上非汉字字符'));
      }
    };
    return {
      dialog: false,
      loading: false,
      form: {
        oldPassword: '',
        newPassword: ''
      },
      rules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: passwordRule }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(['user_info'])
  },
  methods: {
    async submit() {
      try {
        this.loading = true;
        await operator_pwdreset(this.form);
        this.$message({
          type: 'success',
          message: '重置密码成功'
        });
        this.loading = false;
        this.dialog = false;
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    }
  }
};
</script>
